<template>
<div>
  <el-row>
    <el-col :span="4">
      <el-input v-model="docId" placeholder="单号查询"/>
    </el-col>
    <el-col :span="4" :offset="1">
      <el-input v-model="consignee" placeholder="收货人"/>
    </el-col>
    <el-col :span="4" :offset="1">
      <el-input v-model="conTel" placeholder="收货人电话"/>
    </el-col>
  </el-row>
  <el-table style="width: 100%" height="500"
    :data="documents.filter(data => data.docId.toString().includes(docId) && data.consignee.includes(consignee) && data.conTel.includes(conTel))">
    <el-table-column label="单号" prop="docId"></el-table-column>
    <el-table-column label="托运人" prop="sinpper"></el-table-column>
    <el-table-column label="托运人电话" prop="sinTel"></el-table-column>
    <el-table-column label="收货人" prop="consignee"></el-table-column>
    <el-table-column label="收货人电话" prop="conTel"></el-table-column>
    <el-table-column label="付款方式" prop="payment"></el-table-column>
    <el-table-column label="交货方式" prop="delivery"></el-table-column>
    <el-table-column label="总运费" prop="totalCost"></el-table-column>
    <el-table-column label="状态" prop="state"></el-table-column>
    <el-table-column align="center">
      <template slot="header">
        操作
      </template>
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-success" @click="docuSign(scope.$index, scope.row)">签收</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
import {updateDocument} from 'network/document.js'

export default {
  data() {
    return {
      documents: [],
      docId: '',
      consignee: '',
      conTel: ''
    }
  },
  methods: {
    docuSign(index, row) {
      this.$confirm('运单'+row.docId+'确认已签收?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateDocument({docId:row.docId,state:"已签收",docEnd:row.docEnd}).then(res => {
          if(res > 0) {
            this.$message({
              showClose: true,
              message: '签收成功',
              type: 'success'
            });
            this.documents.splice(index,1)
            //获取当前网点的所有运单列表存在vuex里
            this.$store.dispatch('setDocument',JSON.parse(sessionStorage.loginAccount).sitetb.siteName)
          }
        })
      })
    }
  },
  mounted() {
    for(let document of this.$store.state.modules.allSiteDocument.documents) {
      if(document.state == "待自提" || document.state == "配送中" ) {
        this.documents.push(document)
      }
    }
  }
}
</script>

<style scoped>
</style>
